<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome</title>
<style type="text/css">
p {
	color: white;
}

div {
	margin-top: 20px;
	margin-right: 10px;
	border-color: blue;
	background-color: buttonface;
	width: 150px;
	float: left;
}
</style>

<script type="text/javascript" src="jQuery/jquery.js"></script>
<script>
	$(document).ready(function() {
		
		$("#paragraph").hide();
		$("#button1").click(function() {
			$("#subjects").hide();
			$("#paragraph").show();
			
			

		});
		
	});

	$(document).ready(function() {

		
		$("#courses").hide();
		$("#button2").click(function() {
			$("#paragraph").hide();
			$("#subjects").hide();
			$("#courses").fadeIn();
			$("#courses").fadeOut(2000);
		});

	});

	$(document).ready(function() {
		$("#subjects").hide();
		$("#button3").click(function() {
			$("#paragraph").hide();
			$("#subjects").slideToggle("slow");
		});
	});
</script>


</head>
<body>
	<h3>Welcome to Home Page ....</h3>
	<div align="center">

		<a href="loginUser.htm">Login User </a>

	</div>
	<div style="margin-top: 20px;width: 250px;">
	<button id="button1">Name</button>
	<button id="button2">Courses</button>
	<button id="button3">Subjects</button>
</div>
	<div id="paragraph"
		style="margin-left: 20px; margin-top: 10px; background-color: blue;">
		<p>Praveen</p>
		<p>Praveen2</p>

	</div>

	<div id="courses"
		style="margin-left: 20px; margin-top: 10px; background-color: blue;">
		<p>Long Term</p>
		<p>Short Term</p>
	</div>
	<div id="subjects"
		style="margin-left: 20px; margin-top: 10px; background-color: blue;">
		<p>Computer organization</p>
		<p>Data communication</p>
	</div>



</body>
</html>

